<template>
  <div>
    <div>
      <div>产品报价</div>
      <!-- 内容 -->
      <div class="context">
        <el-card shadow="hover">
          <span>产品信息</span>
          <hr />
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="产品图片" width="80" header-align="center" align="center">
              <template #default="scope">
                <el-image style=" width:100%; height: 100%" :src=scope.row.picurl />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="产品名称" width="100" header-align="center" align="center" />
            <el-table-column prop="model" label="产品型号" width="120" header-align="center" align="center" />
            <el-table-column prop="num" label="需求数量" width="300" header-align="center" align="center" />
            <el-table-column label="操作" header-align="center">
              <template #default="scope">
                <el-button type="primary" title="查看报价" @click="showQuote(scope.row)">查看报价</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <!-- 尾部 -->
      <!-- 底部 保存后需要向父组件传递一个信息,已告诉父组件需要发送请求-->
      <Buttom @yes="yes" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Buttom from "./buttom.vue";
import { useRouter, useRoute } from "vue-router";
import { selectByInquiryId } from '@/api/customer.ts'

//路由
const router = useRouter()
const route = useRoute()

//页面数据初始化
onMounted(() => {
init()
})
async function init() { 
  //接受路由传递内容
  const res = route.query
  console.log(res)
  //查询的条件
  const condition = res.id
  console.log(condition)
  //调接口--调接口--根据询价单id查询价明细
  const data = await selectByInquiryId(condition)
  //获取所有数据
  AllData.value = data.data
  console.log(data)
  //仅仅获取展示的数据
  tableData.value = data.data.customerInquiryDetails
  console.log(tableData.value)
}
//接收所有数据
const AllData = ref()
//接收详情的数据
const tableData = ref([])

//查看产品报价详情
function showQuote(row) {
  console.log(row)
  router.push({ name: "ProductQuote", query: row })
}
//这里只是查看报价,无法做出其他的操作
function yes() {
  router.push({ name: "InquiryManagement" })
}

</script>

<style scoped>
.context {
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 30px;
}
</style>
